<template>
	<view class="page-wrap">
		<match-media :min-width="MAX_SIZEiZE">
			<navBar></navBar>
		</match-media>
		<match-media :max-width="MAX_SIZEiZE - 1">
			<cu-custom :title="$t('Page.mineWallet.czjg')" :goBack="goBack"> </cu-custom>
		</match-media>
		<view class="content">
			<pc-nav-bar :pageName="$t('Page.mineWallet.czjg')"> </pc-nav-bar>
			<view class="result-cont">
				<image v-if="payInfo.status == 1" class="atatus-icon"
					:src="`/static/image/Mine/Mywallet/success-${theme}.png`">
				</image>
				<image v-else class="atatus-icon" :src="`/static/image/Mine/Mywallet/fail-${theme}.png`"></image>
				<view class="status-text">
					{{payInfo.status == 1 ? 'Recharge successful' : 'Recharge failed'}}
				</view>
				<view class="row">
					<view class="row-l">
						{{$t('Page.mineWallet.ddh')}}
					</view>
					<view class="row-r">
						{{payInfo.sn}}
					</view>
				</view>
				<view class="row">
					<view class="row-l">
						{{$t('Page.mineWallet.czje')}}
					</view>
					<view class="row-r bouns">
						R$ {{payInfo.price}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pcNavBar from '@/components/pcNavBar/pcNavBar.vue'
	import cuCustom from '@/components/cu-custom/cuCustom.vue'
	import {
		mapState
	} from 'vuex'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	export default {
		components: {
			pcNavBar,
			cuCustom
		},
		data() {
			return {
				MAX_SIZEiZE,
				payInfo: {},
				isRecharge: false
			}
		},

		computed: {
			...mapState({
				theme: state => state.app.theme,
			}),
		},
		onLoad(option) {
			if (option.item) {
				const item = JSON.parse(decodeURIComponent(option.item));
				this.payInfo = item
				this.isRecharge = item.isRecharge
			}
		},
		methods: {
			goBack() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					if (this.isRecharge) {
						uni.reLaunch({
							url: `/pages/Mine/wallet/wallet?index=0`
						})
					} else {
						// #ifdef H5
						history.back()
						// #endif

						// #ifdef APP-PLUS
						uni.navigateBack();
						// #endif

					}
				} else {
					if (this.isRecharge) {
						uni.reLaunch({
							url: `/pages/Mine/wallet/wallet?index=0`
						})
					} else {
						// #ifdef H5
						history.back()
						// #endif

						// #ifdef APP-PLUS
						uni.navigateBack();
						// #endif

					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap {
		min-height: 100vh;
		background: var(--bg-3);

		.content {
			width: 100%;
			height: calc(100vh - 44px - var(--status-bar-height));
			overflow-y: scroll;
			padding: 60px 15px 0;
			box-sizing: border-box;

			.result-cont {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 30px;

				.atatus-icon {
					width: 140px;
					height: 140px;
				}

				.status-text {
					font-size: 16px;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					margin: 12px auto 40px;
				}

				.row {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 40px;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;

					.row-l {
						font-size: 14px;
						color: var(--color-34);
					}

					.row-r {
						font-size: 15px;
						color: #FFFFFF;
					}

					.bouns {
						color: var(--color-1);
					}
				}
			}
		}
	}

	@media screen and (min-width: 768px) {
		.page-wrap {
			padding-top: 70px;

			.content {
				width: 100%;
				height: calc(100vh - 70px) !important;
				overflow-y: auto;
				padding: 10px 30px 0;
				box-sizing: border-box;

			}
		}
	}
</style>